<template>
  <div class="container">
    <div class="search">
      <i class="iconfont search1"></i>
      <!--  @keyup="handleList" -->
      <input
        type="text"
        placeholder="请输入城市名、拼音或字母查询"
        v-model="keyword"
        @input="handleEnter"
      />
      <ul class="unsearch" v-if="isshow">
        <li
          v-for="item of cityList"
          :key="item.id"
          @click="handleItem(item.name)"
          v-if="changeShow"
        >
          {{ item.name }}
        </li>
        <p v-if="!changeShow">似乎没有找到你想查找的城市</p>
      </ul>
    </div>
    <div v-if="!isshow">
      <h3>当前城市</h3>
      <button class="location" @click="handleItem('武汉')">
        {{ $store.city }}
      </button>
      <h3>定位/最近访问</h3>
      <div>
        <button><i class="iconfont ic_site"></i> 武汉市</button>
        <button
          @click="handleItem(item)"
          v-for="item of historyCities"
          :key="item"
        >
          {{ item }}
        </button>
      </div>
      <h3>热门城市</h3>
      <div>
        <button
          @click="handleItem(item.name)"
          v-for="item in hotCities"
          :key="item.name"
        >
          {{ item.name }}
        </button>
      </div>
      <city-list @handleCity="handleItem"></city-list>
    </div>
  </div>
</template>

<script setup>
/* 1、热门城市的渲染 */
import { ref, onMounted, watch } from "vue";
import CityList from "./CityList.vue";
import { getCityHttp } from "@/request/index.js";
import { useRouter } from "vue-router";
const $router = useRouter();
/* 导入 pina */
import { useCityStore } from "@/stores/city.js";
const hotCities = ref([]);
const historyCities = ref([]);
var allCity = [];
onMounted(async () => {
  let result = await getCityHttp();
  hotCities.value = result.data.hotCities;
  const res1 = result.data.cities;
  allCity = Object.values(res1).flat(2);
});

/* 2'设置pina */
const $store = useCityStore();
/* 3、设置最近访问 */
const handleItem = (name) => {
  /* 操作pina */
  $store.changeCity(name);
  /* 实现最近访问的功能   数组中没有，就添加到数组最前面；若是有值，则先移除再添加到数组最前面*/
  /* 3-1 false unshift */
  /* indexOf() 搜索数组中的元素，并返回它所在的位置 -1表示不存在 */
  if (historyCities.value.indexOf(name) == -1) {
    historyCities.value.unshift(name);
  } else {
    /* 3-2 true  splice unshift */
    let index = historyCities.value.indexOf(name);
    historyCities.value.splice(index, 1); //先删除
    historyCities.value.unshift(name); //后添加
  }
  /* 限制历史记录只有三位 */
  historyCities.value = historyCities.value.slice(0, 3);
  /* 5、路由回传 Home */
  $router.back();
};

/* 4、监听历史记录---设置缓存 */
watch(historyCities, (val) => {
  /* 4.1、设置缓存 */
  localStorage.setItem(
    "historyCities",
    JSON.stringify(val)
  ); /* 只能存储简单数据类型  JSON.stringify（）js数据转层json字符串*/
});
/* 4.2、获取缓存 再给 historyCities*/
onMounted(() => {
  let result = JSON.parse(localStorage.getItem("historyCities"));
  if (result) {
    //若缓存中有值 则将缓存中的数据给historyCities
    historyCities.value = result;
  }
});

/* ------------处理搜索框--------------- */
const keyword = ref("");
const cityList = ref([]);
const isshow = ref(false); //大框
const changeShow = ref(true); //查到
//1、获取input的值
const handleEnter = () => {
  console.log(keyword.value, "keyword.value");
  if (keyword.value) {
    console.log("111");
    isshow.value = true;
    cityList.value = allCity.filter((item) =>
      item.name.includes(keyword.value)
    );
    if (cityList.value.length) {
      // 因为任何非零的数字在布尔上下文中都被视为 true
      console.log("存在");
      changeShow.value = true;
    } else {
      console.log("不存在");
      changeShow.value = false;
    }
  } else if (keyword.value == "") {
    console.log("222");
    isshow.value = false;
  }
};


</script>

<style scoped>
.container {
  width: 600px;
  margin: 0 auto;
}

.container .search {
  position: relative;
  width: 100%;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px 0;
  padding: 1px 11px;
  background-color: #efefef;
  border: 1px solid #a2a2a2;
  border-radius: 4px;
}

.container .search .search1 {
  color: #898989 !important;
  font-size: 18px;
}

.container .search input {
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  background-color: #efefef;
  font-size: 14px;
  color: #898989;
  padding-left: 10px;
}
.container .search ul {
  list-style: none;
  border: none;
}
.container .search li {
  border-bottom: 1px solid #efefef;
  line-height: 30px;
  font-size: 14px;
}
.container .search .unsearch {
  position: absolute;
  background-color: #fff;
  width: 100%;
  padding: 10px 5px;
  cursor: pointer;
  top: 30px;
}

.container h3 {
  text-indent: 15px;
  line-height: 40px;
  color: #666;
  font-size: 16px;
  font-weight: lighter;
  background-color: #efeeee;
  margin: 6px 0;
}

.container button {
  width: 80px;
  height: 40px;
  border: 1px solid #c2c0c0;
  background-color: #fff;
  border-radius: 5px;
  font-size: 14px;
  margin-top: 6px;
  margin-right: 10px;
  cursor: pointer;
}

.container button:hover {
  cursor: pointer;
  background-color: #cecccc;
}

.container .location {
  background-color: #198754;
  color: #fff;
}
</style>
